<template>
  <el-form ref="formRef" :model="form" label-width="auto" :rules="loginRules">
    <el-form-item label="商品名称：" prop="productName">
      <el-input v-model="form.productName"></el-input>
    </el-form-item>
    <el-form-item label="单号：" prop="orderNo">
      <el-input v-model="form.orderNo"></el-input>
    </el-form-item>
    <el-form-item label="描述：" prop="description">
      <el-input v-model="form.description"></el-input>
    </el-form-item>
    <el-form-item label="库存：" prop="inventory">
      <el-input v-model="form.inventory"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit(formRef)">立即创建</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from "vue"
import { editData } from "@/service/commodity/index"
interface tableInfoType {
  id: string
  productName: string
  orderNo: string
  description: string
  inventory: string
}
const props = defineProps<{
  tableInfo: tableInfoType
}>()

const { tableInfo } = toRefs(props)
console.log(tableInfo.value, "tableInfotableInfo")

const formRef = ref(null)
const form = reactive({
  id: tableInfo.value.id,
  productName: tableInfo.value.productName,
  orderNo: tableInfo.value.orderNo,
  description: tableInfo.value.description,
  inventory: tableInfo.value.inventory
})
const loginRules = ref({
  productName: [
    { required: true, trigger: "blur", message: "商品名称不能为空" }
  ],
  orderNo: [{ required: true, trigger: "blur", message: "单号不能为空" }],
  description: [{ required: true, trigger: "blur", message: "描述不能为空" }]
})
const emit = defineEmits(["close", "getData"])
const onSubmit = (formEl) => {
  formEl.validate(async (valid) => {
    if (!valid) return
    await editData(form)
    emit("close")
    emit("getData")
  })
}
const cancel = () => {
  emit("close")
}
</script>
<style lang="scss" scoped></style>
